<!-- home -->
<template>
  <div class="container">
    <div class="top">
      <van-image src="https://sqyfximage.oss-cn-qingdao.aliyuncs.com/zhmc/images/touxiang.png" width="50" height="50"></van-image>
      <div style="padding-top: 10px;padding-left: 10px;font-size: 18px;">{{deptname}} > {{name}}</div>
    </div>
    <van-divider></van-divider>
    <div class="rownr" @click="gotoMyAchievements">
      <div style="padding-left: 10px;">
        <img
          width="30px"
          height="30px"
          src="../images/myAchi.png"
        />
      </div>

      <div  style="padding-top: 5px;font-size: 16px;padding-left: 20px;"> 我的业绩 </div>
      <img class="jt" src="https://sqyfximage.oss-cn-qingdao.aliyuncs.com/zhmc/images/fxy.png" />
    </div>

    <van-divider></van-divider>
    <div class="rownr" @click="gotoCost">
      <div style="padding-left: 10px;">
        <img
          width="30px"
          height="30px"
          src="../images/cost.png"
        />
      </div>
      <div  style="padding-top: 5px;padding-left: 10px;font-size: 16px;padding-left: 20px;"> 我的费用 </div>
      <img class="jt" src="https://sqyfximage.oss-cn-qingdao.aliyuncs.com/zhmc/images/fxy.png" />
    </div>
    <van-divider></van-divider>
    <div class="rownr" @click="gotoMyTask">
      <div style="padding-left: 10px;">
        <img
          width="30px"
          height="30px"
          src="../images/task.png"
        />
      </div>
      <div  style="padding-top: 5px;padding-left: 10px;font-size: 16px;padding-left: 20px;"> 我的任务 </div>
      <img class="jt" src="https://sqyfximage.oss-cn-qingdao.aliyuncs.com/zhmc/images/fxy.png" />
    </div>
    <van-divider></van-divider>
    <div class="rownr" @click="gotoGzhb">
      <div style="padding-left: 10px;">
        <img
          width="30px"
          height="30px"
          src="../images/gzhb.png"
        />
      </div>
      <div  style="padding-top: 5px;padding-left: 10px;font-size: 16px;padding-left: 20px;"> 我的工作汇报 </div>
      <img class="jt" src="https://sqyfximage.oss-cn-qingdao.aliyuncs.com/zhmc/images/fxy.png" />
    </div>
    <van-divider></van-divider>
    <div class="rownr" @click="doModifyPassword">
      <div style="padding-left: 10px;">
        <img
          width="30px"
          height="30px"
          src="../images/reset.png"
        />
      </div>
      <div  style="padding-top: 5px;padding-left: 10px;font-size: 16px;padding-left: 20px;"> 修改密码 </div>
      <img class="jt" src="https://sqyfximage.oss-cn-qingdao.aliyuncs.com/zhmc/images/fxy.png" />
    </div>
    <van-divider></van-divider>
    <div class="rownr" @click="doLogout">
      <div style="padding-left: 10px;">
        <img
          width="30px"
          height="30px"
          src="../images/logout.png"
        />
      </div>
      <div  style="padding-top: 5px;padding-left: 10px;font-size: 16px;padding-left: 20px;"> 退出登录 </div>
      <img class="jt" src="https://sqyfximage.oss-cn-qingdao.aliyuncs.com/zhmc/images/fxy.png" />
    </div>
    <van-divider></van-divider>

    <van-dialog v-model="show" title="修改面" show-cancel-button @confirm="onsubmit" @cancel="oncancel">
      <van-field
        label-width="50%"
        v-model="oldpassword"
        label="请输入旧密码:"
        required
        placeholder="请输入"
      />
<!--
      <van-field
        label-width="50%"
        v-model="password"
        label="请输入新密码:"
        required
        placeholder="请输入"
      />-->
      <van-field
        v-model="cmpassword"
        label="请输入新密码:"
        label-width="50%"
        required
        placeholder="请输入"
      />
    </van-dialog>

  </div>
</template>

<script>

import { Dialog, Toast, Grid, GridItem } from 'vant'

import { queryUserInfo, updateUserPwd, logout } from '../../api/api'
import { getToken, setToken, removeToken } from '@/utils/auth'
export default {
  name: 'Search',
  data() {
    return {
      deptname: '',
      userid: '',
      postList: [],
      deptid: '',
      name: '',
      password: '',
      cmpassword: '',
      show: false,
      oldpassword: ''
    }
  },

  created() {
    const userid = this.$store.getters.userId
    this.userid = userid
    this.queryUserInfo()
  },
  mounted() { },

  methods: {
    // 查询当前用户所在部门
    queryUserInfo() {
      const param = {}
      const userid = this.$store.getters.userId
      param.userid = userid
      queryUserInfo(param).then(response => {
        if (response.code === 200) {
          console.log(response)
          this.deptname = response.data.deptname
          this.deptid = response.data.deptid
          this.postList = response.data.postList
          this.name = response.data.name
        } else {
          Toast.fail(response.msg)
        }
      })
    },

    gotoMyAchievements() {
      this.$router.push({ path: '/myAchievements', query: { userid: this.userid }})
    },

    gotoMyTask() {
      this.$router.push({ path: '/myTask', query: { userid: this.userid }})
    },

    gotoCost() {
      this.$router.push({ path: '/myCost', query: { userid: this.userid }})
    },

    gotoGzhb() {
      this.$router.push({ path: '/myGzhb', query: { userid: this.userid }})
    },

    doModifyPassword() {
      this.show = true
    },

    doLogout() {
      Dialog.confirm({
        title: '',
        message: '是否退出登录'
      })
        .then(() => {
          logout({}).then(
            response => {
              if (response.code == 200) {
                setToken('')
                this.$router.push({ path: '/', query: {}})
              } else {
                Toast.fail(response.msg)
              }
            }
          )
        })
        .catch(() => {
          // on cancel
        })
    },

    onsubmit() {
      const oldpassword = this.oldpassword
      const newpassword = this.cmpassword
      // updateUserPwd(oldpassword,newpassword);
      updateUserPwd(oldpassword, newpassword).then(
        response => {
          if (response.code == 200) {
            // this.msgSuccess("修改成功");
            Toast.success(response.msg)
          } else {
            Toast.fail(response.msg)
          }
        }
      )
      // this.show = false
    },
    oncancel() {
      this.oldpassword = ''
      this.password = ''
      this.cmpassword = ''
      this.show = false
    }

  }
}
</script>
<style lang="scss" scoped>

  .container{
    width: 100%;
    height: calc(100vh - 55px);
    background-color: white;
  }

  .top{
    padding-left: 20px;
    padding-top: 20px;
    display: flex;
    flex-direction: row;
    background-color: #20a0ff;
    padding-bottom: 10px;
    color: white;
  }

  .jt{
    width: 20px;
    height: 20px;
    position: absolute;
    right: 20px;
  }

  .rownr{
    display: flex;
    flex-direction: row;
  }

</style>
